// 加载背景图片方法
function loadBackground(url, canvas, callback) {
  var context = canvas.getContext("2d")
  var width = canvas.width
  var height = canvas.height
  var img = new Image()
  img.src = url
  img.onload = function () {
    context.drawImage(this, 0, 0, width, height)
    context.drawImage(this, 0, -height, width, height)
    callback && callback(canvas, img)
  }
}

// 加载背景音乐
function loadBacksound() {
  var bgAudio = new Audio("./audio/bg.mp3")
  bgAudio.loop = true
  bgAudio.play()
}

// 移动背景
function moveBackground(canvas, img) {
  setInterval(() => {
    var speed = 5 // 执行速度
    animateBackground(canvas, img, speed)
  }, 30)
}

var bgOffset = 0
// 滚动背景
function animateBackground(canvas, img, speed) {
  var cvsCtx = canvas.getContext("2d")
  var width = canvas.width
  var height = canvas.height
  cvsCtx.save()
  cvsCtx.clearRect(0, 0, width, height)
  bgOffset += speed

  if (bgOffset >= height) {
    bgOffset = 0
  }

  cvsCtx.translate(0, bgOffset)

  cvsCtx.drawImage(img, 0, 0)
  cvsCtx.drawImage(img, 0, -height) // 画两张图，无缝连接

  cvsCtx.restore()
  // window.requestAnimationFrame(animateBackground(canvas, img, speed)) // 使用就报错
}

// 绘制飞机大战背景图
window.onload = function () {
  var bgcanvas = document.getElementById("bgcanvas")
  if (bgcanvas.getContext) {
    var bgUrl = "./images/game/bg.jpg"
    loadBackground(bgUrl, bgcanvas, moveBackground)
    loadBacksound()
  } else {
    alert("你的浏览器太low了~")
  }
}
